﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>AngularJS  依赖注入</title>
    <script type="text/javascript" src="Scripts/angular.js"></script>
</head>
<body>
    <h2>AngularJS 依赖注入</h2>

    <div ng-app="mainApp" ng-controller="CalcController">
        <p>输入一个数字: <input type="number" ng-model="number" /></p>
        <button ng-click="square()">X<sup>2</sup></button>
        <p>结果: {{result}}</p>
    </div>
    <script>
         var mainApp = angular.module("mainApp", []);
         mainApp.value("defaultInput", 5);

         mainApp.factory('MathService', function () {
             var factory = {};

             factory.multiply = function (a, b) {
                 return a * b;
             }
             return factory;
         });

         mainApp.service('CalcService', function (MathService) {
             this.square = function (a) {
                 return MathService.multiply(a, a);
             }
         });

         mainApp.controller('CalcController', function ($scope, CalcService, defaultInput) {
             $scope.number = defaultInput;
             $scope.result = CalcService.square($scope.number);

             $scope.square = function () {
                 $scope.result = CalcService.square($scope.number);
             }
         });

    </script>


</body>
</html>